﻿@page "/multiselects"

<h3>MultiSelect 多项选择器</h3>

<h4>当进行多项选项时，使用下拉菜单展示并提供搜索多项选择内容</h4>

<Block Title="颜色" Introduction="提供各种颜色的多选下拉框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Success" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Danger" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Warning" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Info" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Secondary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Dark" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
    </div>
</Block>

<Block Title="双向绑定值字符串" Introduction="绑定一个逗号字符串分割的字符串">
    <p>
        <div><code>MutltiSelect</code> 组件数据源 <code>Items</code> 与 <b>选中值</b> <code>SelectedItemsValue</code> 均支持双向绑定；本例中通过双向绑定 <code>SelectedItemsValue</code> 变量，通过下拉框选择更改其值</div>
    </p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items4" @bind-Value="@SelectedItemsValue"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="添加选项" OnClick="@AddItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少选项" OnClick="@RemoveItems"></Button>
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</Block>

<Block Title="双向绑定值集合" Introduction="绑定一个泛型 <code>IEnumerable<T></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedArrayValues</code> 集合变量，通过下拉框选择更改其值</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items5" @bind-Value="@SelectedArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="添加" OnClick="@AddListItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveListItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</Block>

<Block Title="双向绑定值数组" Introduction="绑定一个数组 <code>int[]</code>">
    <p>本例中通过双向绑定 <code>SelectedIntArrayValues</code> 数组变量，通过下拉框选择更改其值</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="添加" OnClick="@AddArrayItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveArrayItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</Block>

<Block Title="双向绑定枚举集合" Introduction="绑定一个泛型 <code>IEnumerable<Enum></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedEnumValues</code> 集合变量，通过下拉框选择更改其值，<b>枚举</b> 类型时无需设置 <code>Items</code> 参数，额外功能是组件内部会尝试查找资源文件或者 <code>DisplayAttribute</code> 与 <code>DescriptionAttribute</code> 标签尝试进行本地化翻译工作，如本例切换到 <b>中文</b> 时枚举值为 <b>小学</b> 与 <b>中学</b></p>
    <MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
    <div>@(string.Join(",", SelectedEnumValues))</div>
</Block>

<Block Title="搜索功能" Introduction="通过设置 <code>ShowSearch</code> 值开启搜索功能">
    <p>本例中设置搜索回调委托方法 <code>OnSearchTextChanged</code> 进行自定义搜索结果，如果未设置时内部使用显示文本进行模糊匹配</p>
    <MultiSelect Items="@Items6" @bind-Value="@SelectedItemsValue6" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
    <div>@SelectedItemsValue6</div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用功能" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
    <p>禁用状态时组件无任何响应</p>
    <MultiSelect Items="@Items7" Value="@SelectedItemsValue7" IsDisabled="true" />
</Block>

<Block Title="选项改变时事件" Introduction="通过设置 <code>OnSelectedItemsChanged</code> 回调方法获取当前选中数据集合改变事件">
    <MultiSelect Items="@Items8" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue8" />
    <Logger @ref="Trace2" />
</Block>

<Block Title="客户端验证" Introduction="下拉框未选择时，点击提交按钮时拦截。">
    <p>内置到 <code>ValidateForm</code> 组件时，自动开启客户端验证功能，绑定模型拥有 <code>Required</code> 标签</p>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect @bind-Value="@Model.Education" />
            </div>
            <div class="col-12 col-sm-4 align-self-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Foo">
        <div class="row g-3">
            <div class="col-12">
                <MultiSelect Color="Color.Primary" Items="@Items9" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items10" @bind-Value="@Foo.Name" />
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <MultiSelect Color="Color.Primary" Items="@Items11" @bind-Value="@Foo.Name" DisplayText="自定义姓名" ShowLabel="true" />
</Block>

<Block Title="选项超长文字" Introduction="候选项文字特别长">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems1" @bind-Value="@SelectedLongItemsValue1" DisplayText="超长文字" ShowLabel="true"></MultiSelect>
    </div>
</Block>

<Block Title="全选与反选按钮" Introduction="通过设置 <code>ShowSelectAllButton</code> 值设置组件显示全选与反选按钮">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems2" @bind-Value="@SelectedLongItemsValue2" ShowToolbar="true" ShowSearch="true"></MultiSelect>
    </div>
</Block>

<Block Title="设置选项最大数与最小数" Introduction="通过设置 <code>Max</code> <code>Min</code> 值设置组件可选项数量限制">
    <div style="max-width: 300px">
        <p>最多可选择两个选项</p>
        <MultiSelect Items="@LongItems3" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>最少选择两个选项</p>
        <MultiSelect Items="@LongItems4" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
    </div>
</Block>

<Block Title="扩展工具栏按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义工具栏按钮实现自定义功能">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems5" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">测试</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</Block>

<Block Title="级联绑定" Introduction="通过选择第一个下拉框不同选项，第二个下拉框动态填充内容。">
    <p>本例中点击第一个下拉框，可以通过异步方法获取第二个多选框的数据源，进行赋值后，调用 <code>StateHasChanged</code> 进行对 <b>多选框</b> 重新渲染</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items2" />
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
